<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>污染物数据</title>
</head>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="scr/echarts.min.js"></script>
</head>
<style>
    body{
        background-image: url(scr/background.jpg);
        background-attachment: fixed;
        background-size: 100%;
        z-index: 0;
    }
    span{float: left;display: inline-block;height: 40px;}
    h2{color: snow;margin-left: 50px}
    /*canvas{margin-left:180px;width: 900px;height: 300px;border:1px solid #d3d3d3;background-color: snow;opacity: 60%}*/
</style>
<script>
    var loc = location.href;
    var n1 = loc.length;
    var n2 = loc.indexOf("=");
    var city = decodeURI(decodeURI(loc.substr(n2+1, n1-n2)));
    document.write("<h1 id=\"head\" align=\"center\" style=\"size: 5px;color:snow\">"+city+"的污染物数据"+"</h1>")
    document.getElementById("city").innerHTML = city
    function init(){//初始化函数
        var date = new Date()
        var d = date.getFullYear() + '-' + (appendZero(date.getMonth() + 1)) + '-' + appendZero(date.getDate())
        document.getElementById("date").max = d
    }

    function appendZero (obj) {//个无数补0
        if (obj < 10) {
            return '0' + obj
        } else {
            return obj
        }
    }
</script>
<body onload='init()'>
    <div class="box" style="display: inline-block">
        <span class="span1" style="color: snow;margin-left: 960px">
                选择日期
        </span>
        <span class="span2" style="margin-left: 10px">
                <input type="date" id="date" value="2021-05-06" min="2014-05-13" max="/"/>
            <!-- 请使用谷歌浏览器，其他浏览器可能无法加载这个控件 -->
        </span>
        <span class="span3" style="margin-left: 5px;display: inline-block">
            <button type="button" style="
                background-image: url(scr/log.jpg);
                width: 23px;
                height: 23px;
                background-size: cover;
                border: snow;
            " onclick="search()"></button>
        </span>
        <span class="span4" style="margin-left: 5px">
            <button type="button" style="
                background-image: url(scr/return.jpg);
                width: 23px;
                height: 23px;
                background-size: cover;
                border: snow;
            " onclick="re()"></button>
        </span>
    </div><br>


    <!--<h2>AQI折线图</h2>-->
    <!--<canvas id="AQI_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="AQI" style="width: 1000px;height:300px;"></div>
    <div id="PM2.5" style="width: 1000px;height:300px;"></div>
    <div id="PM10" style="width: 1000px;height:300px;"></div>
    <div id="SO2" style="width: 1000px;height:300px;"></div>
    <div id="NO2" style="width: 1000px;height:300px;"></div>
    <div id="O3" style="width: 1000px;height:300px;"></div>
    <div id="CO" style="width: 1000px;height:300px;"></div>

    <!--<h2>PM2.5折线图</h2>-->
    <!--<canvas id="PM2.5_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->

    <!--<h2>PM10折线图</h2>-->
    <!--<canvas id="PM10_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->

    <!--<h2>SO2折线图</h2>-->
    <!--<canvas id="SO2_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->

    <!--<h2>NO2折线图</h2>-->
    <!--<canvas id="NO2_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->

    <!--<h2>O3折线图</h2>-->
    <!--<canvas id="O3_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->

    <!--<h2>CO折线图</h2>-->
    <!--<canvas id="CO_canvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>-->
</body>
<script>
    function search(){//在这里传递城市和日期参数
        //alert(city+" "+document.getElementById("date").value);
        var nums_AQI = [63,61,59,56,54,55,56,57,52,42,36,29,30,32,41,71,103,80,45,36,46,65,75,76];
        var nums_PM2_5 = [27,31,25,20,16,13,10,9,9,7,7,7,7,9,9,12,15,12,7,7,10,14,18,19];
        var nums_PM10 = [112,111,123,120,124,125,136,159,182,182,195,199,152,0,112,95,87,89,91,117,103,93,90,102];
        var nums_SO2 = [2,2,2,2,2,2,2,2,2,3,3,3,3,2,3,3,3,3,3,3,3,3,3,3];
        var nums_NO2 = [26,25,24,24,21,16,14,13,8,5,5,5,5,6,6,6,7,6,6,6,6,7,8,9];
        var nums_O3 = [72,64,55,49,51,58,63,66,76,84,89,92,97,101,103,100,96,95,92,90,87,85,82,81];
        var nums_CO = [0.46,0.43,0.4,0.32,0.26,0.25,0.23,0.23,0.23,0.21,0.2,0.2,0.2,0.2,0.19,0.19,0.2,0.2,0.2,0.21,0.21,0.22,0.2,0.21];
        setChart('AQI',nums_AQI);
        setChart('PM2.5',nums_PM2_5);
        setChart('PM10',nums_PM10);
        setChart('SO2',nums_SO2);
        setChart('NO2',nums_NO2);
        setChart('O3',nums_O3);
        setChart('CO',nums_CO);
    }
    function re(){
        window.history.go(-1);
    }

    nums_AQI = [81,81,87,85,87,88,93,105,116,116,123,140,126,0,81,73,69,70,71,84,77,72,70];
    nums_PM2_5 = [49,47,46,50,50,55,58,65,83,83,90,107,96,0,57,47,36,29,29,36,31,25,24];
    nums_PM10 = [112,111,123,120,124,125,136,159,182,182,195,199,152,0,112,95,87,89,91,117,103,93,90];
    nums_SO2 = [18,15,15,12,11,9,9,9,14,14,19,21,21,0,15,11,6,6,5,4,3,4,4];
    nums_NO2 = [56,62,60,67,73,74,81,89,97,97,113,117,103,0,42,28,22,23,34,33,25,26,20];
    nums_O3 = [71,55,45,34,18,8,5,4,8,8,20,38,68,0,122,128,117,112,94,92,94,82,88];
    nums_CO = [0.28,0.26,0.23,0.2,0.2,0.19,0.21,0.22,0.25,0.23,0.21,0.21,0.19,0.17,0.17,0.17,
        0.16,0.16,0.18,0.19,0.21,0.23,0.29,0.28];
    setChart('AQI',nums_AQI);
    setChart('PM2.5',nums_PM2_5);
    setChart('PM10',nums_PM10);
    setChart('SO2',nums_SO2);
    setChart('NO2',nums_NO2);
    setChart('O3',nums_O3);
    setChart('CO',nums_CO);
    
    // 指定图表的配置项和数据
    function setChart(name,datas){
        var option = echarts.init(document.getElementById(name));
        var chart ={
            title: {
                text: name+'折线图',
                left: '15%',
                textStyle:{
                    color:"white"
                }
            },
            tooltip: {},
            legend: {
                data:[name],
                right:50,
                textStyle:{
                    color: "white"
                }
            },
            xAxis: {
                data: ["0","1","2","3","4","5","6","7","8","9","10",
                    "11","12","13","14","15","16","17","18","19","20",
                    "21","22","23"],
                axisLine: {
                    lineStyle: {
                        color: "white",
                        width: 2
                    }
                }
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "white",
                        width: 2
                    }
                }
            },
            grid: {
                right: '5%',
                left: '15%'
            },
            series: [{
                name: name,
                type: 'line',
                data: datas,
                itemStyle : { normal: {label : {show: true}}},
                color:"white"
            }]
        }
        option.setOption(chart)
    }
    document.close()
</script>
</html>